<!DOCTYPE html>
	<head>
		<meta charset="utf-8" />
		<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
		<link rel="icon" type="image/png" href="../assets/img/favicon.png">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>
			注册
		</title>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
		<!--     Fonts and icons     -->
		<link href="../assets/css/fonts.css" rel="stylesheet" />
		<link rel="stylesheet" href="../assets/css/new_file.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<!-- CSS Files -->
		<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
		<link href="../assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
		<!-- CSS Just for demo purpose, don't include it in your project -->
		<link href="../assets/demo/demo.css" rel="stylesheet" />
		<style>
			.form-check-radio input[type="radio"]:checked+.form-check-sign::after {/*设置选择的样式*/
			    width: 4px;
			    height: 4px;
			    background-color: #e9ecef;
			    border-color: #ebebeb;
			    top: 11px;
			    left: 11px;
			    opacity: 1;
			}
		</style>
		
		<script src="../assets/js/axios-min.js"></script>
		<script src="../assets/js/vue.js"></script>
		<script src="../assets/js/vue-axios.js"></script>
	</head>

	<body class="login-page sidebar-collapse">
	<div id="app">
		<!-- Navbar -->
		<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
			<div class="container">
      <div class="navbar-translate">
      	<span></span>
        <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-bar top-bar"></span>
          <span class="navbar-toggler-bar middle-bar"></span>
          <span class="navbar-toggler-bar bottom-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="../assets/img/blurred-image-1.jpg">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="login.html" style="font-size: 18px;">登录</a>
          </li>
		 
        </ul>
      </div>
			</div>
		</nav>
		<!-- End Navbar -->
		<div class="page-header clear-filter" filter-color="orange">
			<div class="page-header-image"  style="background-image:url(../assets/img/4ae5dbb7g009716ade21b&690.jpg)"></div>
			<div class="content">
				<div class="container">
					<div class="col-md-4 ml-auto mr-auto">
						<div class="card card-login card-plain">
							
				<h2 >注册</h2>
			<form action="../RegisterServlet">
			<div class="card-body">
				<div class="input-group no-border input-lg">
						<div class="input-group-prepend">
								<span class="input-group-text">
                                     <i class="now-ui-icons users_circle-08"></i>
                                </span>
						</div>
						<input type="text" v-model="username" class="form-control" placeholder="用户名" id="username"  required oninvalid="setCustomValidity('请输入用户名')" oninput="setCustomValidity('')"  >						
				</div>
				<div class="input-group no-border input-lg">
						<div class="input-group-prepend">
								<span class="input-group-text">
                                    <i class="now-ui-icons text_caps-small"></i>
                                </span>
						</div>
						<input type="password" v-model="password" placeholder="密码 (密码不要少于6位)" class="form-control"  required oninvalid="setCustomValidity('请输入密码')" oninput="setCustomValidity('')" />
				</div>
				<div class="input-group no-border input-lg">
						<div class="input-group-prepend">
								<span class="input-group-text">
				                    <i class="now-ui-icons emoticons_satisfied"></i>
				                </span>
						</div>
						<input type="text" v-model="name" placeholder="姓名" class="form-control" id="name" pattern="[\u4e00-\u9fa5]{2,}" required oninvalid="setCustomValidity('请输入正确的名字')" oninput="setCustomValidity('')"/>
				</div>
				<div class="input-group no-border input-lg">
						<div class="input-group-prepend">
								<span class="input-group-text">
				                    <i class="now-ui-icons business_badge"></i>
				                </span>
						</div>
						<input type="text" v-model="email" placeholder="邮箱" class="form-control" id="email" pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$" required oninvalid="setCustomValidity('请输入正确的邮箱')" oninput="setCustomValidity('')"/>
				</div>
				<div class="input-group no-border input-lg">
						<div class="input-group-prepend">
								<span class="input-group-text">
                                    <i class="now-ui-icons tech_mobile"></i>
                                </span>
						</div>
						<input type="text" v-model="telephone" placeholder="手机号"  class="form-control" id="tel" pattern="1[345789]\d{9}$" required oninvalid="setCustomValidity('请输入11位有效的手机号码')" oninput="setCustomValidity('')" />
				</div>
				
				<div class="input-group no-border input-lg">
						<div class="row" style="background:  rgba(255, 255, 255, 0.1); border-radius: 30px; margin: 0px;width: 100%;height: 45px;">
							  
							  <div class="col-3" style="line-height: 45px;font-size: 15px;">
							  	性 别
							  </div>
							  <div class="col-9"style="padding: 0px;" >
									<div class="form-check form-check-radio" style="display: inline-block;">
									    <label class="form-check-label">
									        <input class="form-check-input" type="radio" v-model="sex" id="radios1" value="男"   >
									        <span class="form-check-sign"></span>
									        男
									    </label>
									</div>									
									<div class="form-check form-check-radio" style="display: inline-block; margin-left: 20%;">
									    <label class="form-check-label">
									        <input class="form-check-input" type="radio" v-model="sex" id="radios2" value="女">
									        <span class="form-check-sign"></span>
									       女
									    </label>
									</div>
							  </div>
						</div>
			</div>
			
					<a class="btn btn-primary btn-round btn-lg btn-block" @click="submit()">提交</a>
				
			</div>
			</form>	
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>		
		<!--   Core JS Files   -->
		<script src="../assets/js/core/jquery.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/popper.min.js" type="text/javascript"></script>
		<script src="../assets/js/core/bootstrap.min.js" type="text/javascript"></script>
		<!--  Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
		<script src="../assets/js/plugins/bootstrap-switch.js"></script>
		<!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
		<script src="../assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
		<!--  Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
		<script src="../assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
		<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
		<script src="../assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
		
		<script>
			/* var params = new URLSearchParams();
			params.append('username', this.username);
			 params.append('password',this.password);
			params.append('name', this.name);
			 params.append('email',this.email);
			params.append('telephone', this.telephone);
			 params.append('sex',this.sex);
			 axios.post('/RegisterServlet',params)
			                    .then(response => (this.Datas = response.data.json.userMaps))
			                    .catch(error => console.log(error)) */

			new Vue({
				el: '#app',
				data() {
					return {
						
						username:'',
						password:'',
						name:'',
						email:'',
						telephone:'',
						sex:'',
						code:'',
					}
				},
				mounted() {
					



				},
				methods: {
					submit() {
						if(this.username.length == 0){
							alert("用户名不为空!"); 
							return false;
						}
						if(this.password.length < 6){
							alert("密码不要少于6位!"); 
							return false;
						}
						
						var nPattern  = "[\u4e00-\u9fa5]{2,}";
						var regular = new RegExp(nPattern);
						if (!regular.test(this.name)) { //姓名
					   	  alert("请输入正确姓名!"); 
						  return false;
						 }
						var ePattern = "^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$";
						var regular = new RegExp(ePattern);
						  if(!regular.test(this.email)){
						      alert('请输入有效的邮箱！');
						      return false;
						  }
						  if(this.telephone.length!=11){
						      alert('请输入有效的手机号！');
						      return false;
						  }
						  
						
						
						
												
						axios.get('/test/RegisterServlet',{
						        params: {
								  username: this.username,
								  password:this.password,
								  name:this.name,
								  email:this.email,
								  telephone:this.telephone,
								  sex:this.sex,
						        }
						      })
						      .then((response) => {
						        console.log(response.data);//请求的返回体
						        this.code = response.data.code;
						        if (this.code==1) {
							        alert("注册成功！！！");
							        window.location.href='/test/view/login.html'; 
							      }
						        if(this.code==0){
						        	alert("该用户名已存在。。。");
						        }
						       
						      })
						      .catch((error) => {
						        console.log(error);//异常
						 });					
					},
					
					
				}

			})
		
		</script>
	</body>

</html>